<template>
  <div>
    <nav-bar
      :title="title"
      :isShow="false"
      :leftArrow="false"
      leftText=""
    ></nav-bar>
    <div class="img_outer">
      <van-image
        width="100%"
        height="200"
        :src="retailer_id > 0 ? retailer_img : client_img"
      />
      <h4 class="title">{{ name }}</h4>
    </div>

    <my-card :is_link="true"></my-card>

    <van-cell-group>
      <!-- <van-cell
        v-for="item in perms"
        size="large"
        :title="item.name"
        is-link
        :to="{ name: item.path, params: { retailer_id: retailer_id } }"
        :key="item.id"
        :value="item.comment"
      /> -->
      <van-cell
        size="large"
        title="免费品鉴卡"
        is-link
        label="黄山功夫原浆枸杞啤酒免费品鉴活动卡"
        :to="{ name: 'SampleCardList' }"
      />
      <van-cell
        size="large"
        title="免费品鉴活动记录"
        label="黄山功夫原浆枸杞啤酒免费品鉴活动"
        is-link
        :to="{ name: 'ClientSampleRecord' }"
      />

      <van-cell
        size="large"
        title="完善个人信息"
        label="填写个人信息"
        is-link
        :to="{ name: 'ClientInfo' }"
      />
    </van-cell-group>
    <div style="margin: 32px 80px" v-if="retailer_id > 0 || wx_staff > 0">
      <van-button round block type="info" icon="share-o" @click="goDashBoard"
        >进入商家界面</van-button
      >
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import NavBar from "@/components/NavBar";
import MyCard from "@/components/MyCard";

import { getWxRetailerInfo } from "@/api/member";
import retailer from "@/assets/images/retailer.png";
import client from "@/assets/images/client.png";

export default {
  name: "Card",
  components: {
    NavBar,
    MyCard,
  },
  computed: {
    ...mapGetters(["retailer_id", "wx_staff"]),
    maxDate() {
      let datetime = new Date();
      datetime = datetime.setFullYear(datetime.getFullYear() + 2);
      return new Date(datetime);
    },
  },

  data() {
    return {
      title: this.$route.meta.title,
      name: "",
      retailer_img: retailer,
      client_img: client,
    };
  },
  mounted() {
    this.getRetailerInfo();
  },
  methods: {
    goDashBoard() {
      this.$router.push({
        name: "RetailerDashboard",
        params: { retailer_id: this.retailer_id },
      });
    },
    getRetailerInfo() {
      getWxRetailerInfo()
        .then((res) => {
          const data = res.data;
          if (data.status_code == 200) {
            this.name = data.retailer.name;
          }
        })
        .catch(() => {
          this.$toast("获取信息错误!");
        });
    },
  },
};
</script>

<style  scoped>
.img_outer {
  margin: 0px;
  position: relative;
}
.title {
  position: absolute;
  text-align: center;
  left: 5px;
  top: 5px;
  margin: 0;
  color: yellow;
}
</style>